<ion-view view-title="线路换乘">
    <ion-header-bar class="bar-balanced tran-bar">
        <h1 class="title">线路换乘</h1>
    </ion-header-bar>
    <ion-content class="tr-scroll">
        <div class="tran-con">
            <div id="tran-main">
                <div class="list tran-list">
                    <div class="item item-input tran-input">
                        <img src="./img/s.png" class="s-img">
                        <input type="text" class="in-text" id="txtBusSta" placeholder="输入起点" ng-click="clickSta()" ng-model="sAddr.sta" readonly="readonly">
                        <!--<i class="icon ion-close-circled in-close" id="c-txtBusSta"></i>-->
                    </div>
                    <div class="item item-input tran-input">
                        <img src="./img/e.png" class="s-img">
                        <input type="text" class="in-text" id="txtBusEnd" placeholder="输入终点" ng-click="clickEnd()" ng-model="sAddr.end" readonly="readonly">
                        <!--<i class="icon ion-close-circled in-close" id="c-txtBusEnd"></i>-->
                    </div>
                    <div class="tran-icon" ng-click="serChange()"></div>
                    <div class="btn-search" ng-click="serClick()"><i class="we-font we-icon-search"></i></div>
                </div>
                <div class="search-title item item-divider" ng-if="transit.length" style="background-color: #fff;">搜索历史<i class="we-font we-icon-delete"
                                                                                          ng-click="delSearchConfirm();"></i>
                </div>
                <div class="search-histroy-list ts-con" ng-if="transit.length">
                    <div ng-repeat="s in transit track by $index" ng-click="clickList(s)" class="ts-list">
                        <div class="ts-name">{{ s.sName }}</div>
                        <div class="ts-name">{{ s.eName }}</div>
                        <div class="ts-icon"><i class="we-font we-icon-xianluicon"></i></div>
                    </div>

                </div>
            </div>
        </div>
    </ion-content>
</ion-view>
<style type="text/css">
	.s-img{
        width:20px;
        margin-right: 6px;
    }
    .ts-con{
        padding:5px 0 0;

    }
    .ts-name{
        line-height: 22px;
        font-size: 16px;
        color: gray;
    }
    .search-histroy-list .ts-list{
        padding:10px 0 10px 40px;
        position: relative;
        margin: 0px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }
    .search-histroy-list .ts-icon{
        position: absolute;
        left: 13px;
        top:38%;
        color:#0d9d57;
    }
    .btn-search{
        width: 55px;
        height: 113px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
    }
    .btn-search .we-font{
        margin-top: 43px;
        font-size: 22px;
        display: block;
    }
    #in-show{
        position: absolute;
        top: 180px;
        /*left: 100%;*/
        width: 100%;
        z-index: 9;
    }
    #in-show .list{
        margin-top: 5px;
    }
    #in-show .item{
        padding: 10px;
    }
    .tangram-suggestion table tr td{
        height: 40px;
    }
    #txtBusSta,#txtBusEnd{
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        border: none;
        text-align: left;
        background-color: #fff;
    }
    .button-green {
        color: #a1e7a0;
    }

    .button-red {
        color: #ff2222;
    }

    .tran-list {
        background-color: #fff;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
        margin-bottom: 3px;
    }

    .tran-list > div.tran-input {
        margin-left: 39px;
        border-left: none;
        margin-right: 55px;
        border-right:0;
        border-bottom: 1px solid #ddd;
    }

    .in-close {
        color: #ccc;
        padding: 0 10px;
    }

    .in-text {
        padding-right: 0;
    }
</style>